<!DOCTYPE html>
<!-- 
	This document should be identical to SvgEditor.html except that the URLs for svg-edit code
	are absolute, pointing to the live trunk of svg-edit.
-->
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<wicket:link>
<link rel="icon" type="image/png" href="http://svg-edit.googlecode.com/svn/trunk/editor/images/logo.png">

<!-- CSS Styles -->
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/css/jPicker.css" type="text/css"/>
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/css/jgraduate.css" type="text/css"/>
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.css" type="text/css"/>
<link rel="stylesheet" href="cast/css/cast.css" type="text/css"/>
<link rel="stylesheet" href="cast/css/JQuerySpinBtn.custom.css" type="text/css"/>

<!-- JQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- Plugins -->
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/js-hotkeys/jquery.hotkeys.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jquerybbq/jquery.bbq.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgicons/jquery.svgicons.js"></script>
<script type="text/javascript" src="extension/jquery.svgicons.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jquery.jgraduate.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/spinbtn/JQuerySpinBtn.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/contextmenu/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jpicker.min.js"></script>

<!-- JQuery UI - adds "Tabs" to Svg-Edit's default package-->
<script type="text/javascript" src="cast/js/jquery-ui-1.8.13.custom.min.js"></script>

<!-- SVG-Edit -->
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/browser.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgtransformlist.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/math.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/units.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgutils.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/sanitize.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/history.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/select.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/draw.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/path.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgcanvas.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/locale/locale.js"></script>

<!-- Variables set by server before tool is executed -->
<script wicket:id="serverImagePath" type="text/javascript"></script>
<script wicket:id="drawingStarters" type="text/javascript">
	starterImageUrls = [
		"cast/images/cat.jpg",
		"cast/images/flower.jpg",
	];
</script>

<!-- CAST Plugin -->
<script type="text/javascript" src="cwm-drawtool.js"></script>

<!-- Other Plugins -->
<script type="text/javascript">
	$.jqplot = {};
</script>
<script type="text/javascript" src="plugin/jqplot.linearTickGenerator.js"></script>

<!-- Extensions -->
<script type="text/javascript" src="extension/cwm-shapes.js"></script>
<script type="text/javascript" src="extension/cwm-graph-axis.js"></script>

</wicket:link>

<!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />
<link rel="alternate" type="application/atom+xml" title="SVG-edit Updates (Issues/Fixes/Commits)" href="http://code.google.com/feeds/p/svg-edit/updates/basic" />

<title>SVG-edit demo</title>

</head>
<body>
	
<!-- the tabs -->
<div id="svg_editor">
	<div id="workarea">
    	<div id="svgcanvas"></div>
  	</div>
  	<div id="sidepanels">
    	<div id="layerpanel">
			<h3 id="layersLabel">Layers</h3>
			<fieldset id="layerbuttons">
				<div id="layer_new" class="layer_button"  title="New Layer"></div>
				<div id="layer_delete" class="layer_button"  title="Delete Layer"></div>
				<div id="layer_rename" class="layer_button"  title="Rename Layer"></div>
				<div id="layer_up" class="layer_button"  title="Move Layer Up"></div>
				<div id="layer_down" class="layer_button"  title="Move Layer Down"></div>
			</fieldset>
			<table id="layerlist">
				<tr class="layer">
					<td class="layervis"></td>
					<td class="layername">Layer 1</td>
				</tr>
			</table>
			<span id="selLayerLabel">Move elements to:</span>
			<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
				<option selected="selected" value="layer1">Layer 1</option>
			</select>
		</div>
    	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel [X]">L a y e r s</div>
  	</div>
  	<div id="tools_top" class="tools_panel">
    	<!-- Tabbed two-line navigation interface -->
    	<div id="editor_panel">
      		<div id="tabs">
		        <ul>
		          <li><a href="#buttons_starters" id="top_starters"><div id="cast_tab_starters"></div><div id="cast_tab_starters_selected"></div></a></li>
		          <li><a href="#buttons_draw" id="top_draw"><div id="cast_tab_draw"></div><div id="cast_tab_draw_selected"></div></a></li>
		          <li><a href="#buttons_type" id="top_type"><div id="cast_tab_type"></div><div id="cast_tab_type_selected"></div></a></li>
		          <li><a href="#buttons_edit" id="top_edit"><div id="cast_tab_edit"></div><div id="cast_tab_edit_selected"></div></a></li>
		          <li class="last-tab"><a href="#buttons_zoom" id="top_zoom"><div id="cast_tab_zoom"></div></a></li>
		        </ul>
		        <div id="buttons_starters">
					<!-- Drawing Starters added here via extension -->
		          	<!-- Custom Web Image added here via extension -->
					<!-- Upload Image added here via optional extension -->
		        </div>
		        <div id="buttons_draw">
					<div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
					<div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
					<div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
					<div class="tool_button" id="tool_rect" title="Rect Tool [4]"></div>
					<div class="tool_button" id="tool_ellipse" title="EllipseTool [5]"></div>
		        </div>
		        <div id="buttons_type">
		          	<div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
		        </div>
		        <div id="buttons_edit">
		          	<div class="tool_button" id="tool_select" title="Select Tool [1]"></div>
		        </div>
		        <div id="buttons_zoom">
					<div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
						<!-- Zoom buttons -->
					<div id="zoom_panel" class="toolset" title="Change zoom level">
						<input id="zoom" size="3" value="100" type="text" />
						<div id="zoom_dropdown" class="dropdown">
							<button></button>
							<ul>
								<li>1000%</li>
								<li>400%</li>
								<li>200%</li>
								<li>100%</li>
								<li>50%</li>
								<li>25%</li>
								<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
								<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
								<li id="fit_to_all" data-val="content">Fit to all content</li>
								<li>100%</li>
							</ul>
						</div>
					</div>
		        </div>
		        <div id="stroke_fill">
		        	<div class="tool_sep"></div>
		          	<div class="tool_group">
		          		<div id="fill_color" class="color_block"  title="Change fill color"></div>
						<div class="tool_label">Fill</div>
				  	</div>
			        <div class="tool_sep"></div>
				  	<div class="tool_group">
			       		<div id="stroke_color" class="color_block" title="Change stroke color"></div>
			        	<input id="stroke_width" title="Change stroke width" value="5" type="text" data-attr="Stroke Width"/>
						<input id="stroke_style" title="Change stroke dash style" value="none" type="text" style="display:none"/>
						<div id="stroke_style_label" title="Change stroke dash style">&mdash;</div>
					  	<div id="stroke_style_dropdown" class="dropdown">
					  		<button></button>
							<ul>
								<li id="stroke_style_none">&mdash;</li>
								<li id="stroke_style_1">&middot;&middot;&middot;</li>
								<li id="stroke_style_2">---</li>
								<li id="stroke_style_3">-&middot;-</li>
								<li id="stroke_style_4">-&middot;&middot;-</li>
							</ul>
					  	</div>
						<div class="tool_label">Stroke</div>
					</div>
			    </div>
				<div id="rect_panel">
					<div class="tool_sep"></div>
					<div class="tool_group">
						<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
						<div class="tool_label">Corner</div>
					</div>
		        </div>
		        <!-- Buttons when a single element is selected -->
		        <div id="selected_panel">
		        	<div class="tool_sep"></div>
					<div class="tool_group">
			            <div class="push_button small_button" id="tool_move_top" title="Move to Top [Shift+Up]"></div>
			            <div class="push_button small_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
						<div class="tool_label">Order</div>
					</div>
					<div class="tool_sep"></div>
					<div class="tool_group">
		            	<div class="push_button small_button" id="tool_clone" title="Clone Element [C]"></div>
						<div class="tool_label">Copy</div>
					</div>
					<div class="tool_group">
		            	<div class="push_button small_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
						<div class="tool_label">Delete</div>
					</div>
		        </div>
		        <!-- Buttons when multiple elements are selected -->
		        <div id="multiselected_panel"  class="toolset">
					<div class="tool_sep"></div>
					<div class="tool_group">
						<div class="push_button small_button" id="tool_group" title="Group Elements [G]"></div>
					<div class="tool_label">Group</div>
					</div>
					<div class="tool_group">
						<div class="push_button small_button" id="tool_alignleft" title="Align Left"></div>
						<div class="push_button small_button" id="tool_aligncenter" title="Align Center"></div>
						<div class="push_button small_button" id="tool_alignright" title="Align Right"></div>
						<div class="push_button small_button" id="tool_aligntop" title="Align Top"></div>
						<div class="push_button small_button" id="tool_alignmiddle" title="Align Middle"></div>
						<div class="push_button small_button" id="tool_alignbottom" title="Align Bottom"></div>
						<div class="tool_label">Align</div>
					</div>
					<div class="tool_sep"></div>
					<div class="tool_group">
						<div class="push_button small_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
						<div class="tool_label">Copy</div>
					</div>
					<div class="tool_group">
						<div class="push_button small_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
						<div class="tool_label">Delete</div>
					</div>
					<div class="tool_sep"></div>
				</div>
				<div id="g_panel" class="toolset">
					<div class="tool_sep"></div>
					<div class="tool_group">
						<div class="push_button small_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
						<div class="tool_label">Un-Group</div>
					</div>
				</div>
        
				<div id="image_panel">
					<div class="tool_sep"></div>
					<div class="tool_group">
						<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
						<button id="change_image_url" style="display:none;">Change Image</button>
						<div class="tool_label">Image URL</div>
					</div>
				</div>
				<div id="text_panel">
					<div class="tool_sep"></div>
					<div class="tool_group">
						<div class="tool_button small_button" id="tool_bold" title="Bold Text [B]">B</div>
						<div class="tool_button small_button" id="tool_italic" title="Italic Text [I]">i</div>
						<div class="tool_label">Style</div>
					</div>
					<div class="tool_group">
						<input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
						<div id="font_family_dropdown" class="dropdown">
							<button></button>
							<ul>
								<li style="font-family:georgia">Georgia</li>
								<li style="font-family:arial">Arial</li>
								<li style="font-family:comic sans ms">Comic Sans MS</li>
								<li style="font-family:fantasy">Fantasy</li>
								<li style="font-family:courier new">Courier New</li>
								<li style="font-family:impact">Impact</li>
							</ul>
						</div>
						<div class="tool_label">Font</div>
					</div>
					<div class="tool_group">
						<input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
						<div class="tool_label">Size</div>
					</div>
					<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
				</div>
      		</div>
    	</div>
	    <!-- History buttons -->
	    <div id="history_panel">
			<div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
			<div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
	    </div>
		<!-- TODO: Tool Tips -->
	    <!--<div id="tool_tips">Here's a tip.</div>-->
	</div>
  
	<!-- Color Picker (hidden) -->
	<div id="color_picker"></div> 
  
	<!-- Dropdown List Items (hidden) -->
	<div id="option_lists" class="dropdown"></div>
</div>

<!-- Canvas Context Menu -->
<ul id="cmenu_canvas" class="contextMenu">
	<li><a href="#cut">Cut</a></li>
	<li><a href="#copy">Copy</a></li>
	<li><a href="#paste">Paste</a></li>
	<li><a href="#paste_in_place">Paste in Place</a></li>
	<li class="separator"><a href="#delete">Delete</a></li>
	<li class="separator"><a href="#group">Group<span class="shortcut">G</span></a></li>
	<li><a href="#ungroup">Ungroup<span class="shortcut">G</span></a></li>
    <li class="separator"><a href="#move_front">Bring to Front<span class="shortcut">SHFT+CTRL+]</span></a></li>
	<li><a href="#move_up">Bring Forward<span class="shortcut">CTRL+]</span></a></li>
	<li><a href="#move_down">Send Backward<span class="shortcut">CTRL+[</span></a></li>
    <li><a href="#move_back">Send to Back<span class="shortcut">SHFT+CTRL+[</span></a></li>
</ul>

<!-- Layers Context Menu -->
<ul id="cmenu_layers" class="contextMenu">
	<li><a href="#dupe">Duplicate Layer...</a></li>
	<li><a href="#delete">Delete Layer</a></li>
	<li><a href="#merge_down">Merge Down</a></li>
	<li><a href="#merge_all">Merge All</a></li>
</ul>

<!-- Svg-Edit's Dialog Box -->
<div id="dialog_box" class="dialog">
	<div class="overlay"></div>
 	<div id="dialog_container" class="dialog_container">
    	<div id="dialog_content" class="dialog_content"></div>
    	<div id="dialog_buttons" class="dialog_buttons"></div>
  	</div>
</div>

<!-- Drawing Starters Dialog -->
<!-- Slightly modified from Standard Dialog -->
<div id="drawing_starters_dialog" class="dialog">
	<div class="overlay"></div>
 	<div class="dialog_container">
    	<div class="dialog_content"> Test message </div>
    	<div class="dialog_buttons"></div>
  	</div>
</div>

<!-- List of Wicket Provided Extensions - e.g. Upload Dialog -->
<div wicket:id="extensionList">
	<div wicket:id="extensionMarkup" />
</div>

</body>
</html>
